<template>
  <div class="user-list-page">
    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <h1>团购信息管理</h1>
      <el-button type="primary" @click="handleAddUser" :icon="Plus">
        新增团购
      </el-button>
    </div>

    <!-- 商品列表 -->
    <el-card class="user-table-card">
      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :loading="loading"
      >
        <el-table-column
            type="selection"
            width="55"
        ></el-table-column>
        <el-table-column
            prop="id"
            label="团购ID"
            width="120"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="merchantId"
            label="商户Id"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="name"
            label="团购名"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="description"
            label="团购描述"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="discount"
            label="团购价格"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="price"
            label="原本价格"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="personNum"
            label="团购限购人数"
            align="center"
        ></el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="180"
        >
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="handleEdit(scope.row)"
                :icon="Edit"
            >
              查看详情
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
                :icon="Delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import {ref, reactive, toRefs, onMounted} from 'vue';
import {Plus, Search, Delete, Edit} from '@element-plus/icons-vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from 'vue-router';
import server from "../utils/request.js";
import {getUserIdFromToken} from "../utils/jwtUtil.js";

// 路由实例
const router = useRouter();
const userId = getUserIdFromToken()
// 状态管理
const state = reactive({
  // 加载状态
  loading: false,
  // 商品列表数据
  tableData: [],
});

const {loading,tableData, } = toRefs(state);

// 获取数据
const fetchMerchantList = async () => {
  let {data: data} = await server.get(`/groupBuy/${userId}`)
  Object.assign(tableData.value, data.data)
};

// 初始化数据
onMounted(() => {
  fetchMerchantList()
})

// 编辑商品
const handleEdit = (row) => {
  router.push(`/merchantGroupBuyDetail?id=${row.id}`);
};

//删除团购
const handleDelete = async (row) =>{
  let {data:data} = await server.delete(`groupBuy/${row.id}`)
  if (data.code===200){
    ElMessage.success("删除成功")
    location.reload()
  }
}

const handleAddUser = () => {
  router.push(`/merchantGroupBuyAdd`);
};
</script>

<style scoped>
.user-list-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
  padding: 15px;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.user-table-card {
  padding: 15px;
}

.table-actions {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .el-row {
    flex-wrap: wrap;
  }

  .el-col {
    margin-bottom: 10px;
  }

  .el-col:nth-child(1) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .el-col:nth-child(2),
  .el-col:nth-child(3),
  .el-col:nth-child(4) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .el-col:nth-child(5) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .el-col:nth-child(2),
  .el-col:nth-child(3),
  .el-col:nth-child(4) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .table-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>